<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>三维航线起终点Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }

        #mapContainer {
            width: 100%;
            height: 100vh;
        }

        .demo-info {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 1000;
            max-width: 300px;
        }

        .demo-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #00ff88;
        }

        .demo-item {
            margin: 5px 0;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="demo-info">
        <div class="demo-title">三维航线起终点Demo</div>
        <div class="demo-item">起点: 带文字的POI</div>
        <div class="demo-item">终点: 纯图标POI</div>
        <div class="demo-item">鼠标拖拽旋转，滚轮缩放</div>
    </div>

    <div id="mapContainer"></div>
</body>

<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    // 简化的图片加载函数
    function loadImage(imagePath) {
        return new Promise((resolve) => {
            const img = new Image();
            img.crossOrigin = 'anonymous';
            img.onload = () => resolve(img);
            img.onerror = () => resolve(null);
            img.src = imagePath;
        });
    }

    // 初始化地图
    window.app = new GE.App('mapContainer', {
        position: [118.768, 31.828, 800],
        lookAt: [118.768, 31.828, 0],
        cameraScrollSpeed: 5,
        minZoom: 3,
        maxZoom: 21,
        ambientLightIntensity: 5,
        useDefaultTexture: true,
        maxSlopeAngle: 80,
        baseLayer: [{
            url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
            urlDecimal: true,
            tileType: 'image',
            canNotSelect: false
        }]
    });

    // 创建起点POI
    function createStartPOI() {
        const startPOI = new GE.Poi2({
            position: new GE.Point(118.77034254037785, 31.828159805459904, 112),
            name: '江宁大数据局-666',
            size: 100,
            baseImageSize: 200,
            showText: true,
            textStyle: '#ffffff',
            strokeStyle: '#000000',
            strokeWidth: 3,
            textPosition: 'top',
            center: [0.5, 0.0],
            depthTest: true,
            defaultShape: 'square',
            shapeSize: 2.5,
            shapeColor: '#FFFFFF',
            shapeStrokeWidth: 0,
        });

        // 使用batchUpdate统一设置样式
        startPOI.batchUpdate({
            offset: {
                textOffsetX: 0,
                textOffsetY: 10
            },
            image: {
                url: '../assets/img/airport.png'
            },
            background: {
                color: '54, 128, 215', // 背景色
                opacity: 0.9
            }
        });

        app.add(startPOI);
        return startPOI;
    }

    // 创建终点POI
    function createEndPOI() {
        const endPOI = new GE.Poi2({
            position: new GE.Point(118.7669549147338, 31.827504530353607, 1),
            name: '',
            baseImageSize: 200,
            showText: false,
            center: [0.5, 0],
            // depthTest: true,
            // defaultShape: 'circle',
            // shapeSize: 1.5,
            // shapeColor: '#FF6B6B',
            // shapeStrokeWidth: 0,
        });

        // 使用batchUpdate统一设置样式
        endPOI.batchUpdate({
            layout: {
                textPosition: 'image-only'
            },
            image: {
                url: '../assets/img/ed.png',
                size: 750
            }
        });

        app.add(endPOI);
        return endPOI;
    }

    // 创建POI点
    window.startPOI = createStartPOI();
    window.endPOI = createEndPOI();

    // console.log('三维航线起终点Demo加载完成！');
</script>

</html>